<template>
    <el-dropdown trigger="click" class="international" @command="handleSetLanguage">
        <div>
            <svg-icon class-name="international-icon navInternational-icon" icon-class="language" />
            <img class="w-6 h-6" src="@/assets/lang.png" alt="">
        </div>
        <template #dropdown>
            <el-dropdown-menu slot="dropdown">
                <!-- 中国 -->
                <el-dropdown-item  command="zh">
                    中文
                </el-dropdown-item>
                <el-dropdown-item command="tw">
                    繁體
                </el-dropdown-item>
                <!-- 美国 -->
                <el-dropdown-item command="en">
                    English
                </el-dropdown-item>
            </el-dropdown-menu>
        </template>

    </el-dropdown>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n' 
const { t: $t,locale } = useI18n()
import { useStore } from "vuex";
import { useLangStore } from '@/store/index'
const emits = defineEmits(['refreshComponent'])
import { onMounted } from 'vue'
const langStore = useLangStore();
let language = ref()
onMounted(() => {
    language.value = locale.value
})
const handleSetLanguage = (lang: any) => {
    locale.value = lang
    langStore.setLanguage(lang);
    emits('refreshComponent');
    location.reload()
}
</script>


